import React, { Suspense, useState } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined,
  BookOutlined,
  TeamOutlined,
  FileTextOutlined,
  BarChartOutlined,
  FolderOutlined,
  UserOutlined,
  MessageOutlined,
  LogoutOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Button, theme, Avatar, Dropdown, Spin } from "antd";
import type { MenuProps } from "antd";
import styled from "styled-components";
import { useUser } from "../contexts/UserContext";

const { Header, Sider, Content } = Layout;

const StyledLayout = styled(Layout)`
  min-height: 100vh;
`;

const Logo = styled.div`
  height: 32px;
  margin: 16px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
`;

const TeacherLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const { user, setUser } = useUser();

  const menuItems = [
    {
      key: "/teacher",
      icon: <HomeOutlined />,
      label: "首页",
    },
    {
      key: "/teacher/courses",
      icon: <BookOutlined />,
      label: "我的课程",
    },
    {
      key: "/teacher/preparation",
      icon: <BookOutlined />,
      label: "备课与设计",
    },
    {
      key: "/teacher/class-management",
      icon: <TeamOutlined />,
      label: "班级管理",
    },
    {
      key: "/teacher/exam-generation",
      icon: <FileTextOutlined />,
      label: "考核内容生成",
    },
    {
      key: "/teacher/analysis",
      icon: <BarChartOutlined />,
      label: "学情数据分析",
    },
    {
      key: "/teacher/resources",
      icon: <FolderOutlined />,
      label: "课件资源管理",
    },
    {
      key: "/teacher/discussions",
      icon: <MessageOutlined />,
      label: "讨论管理",
    },
  ];

  const userMenuItems: MenuProps["items"] = [
    {
      key: "profile",
      label: "个人中心",
      icon: <UserOutlined />,
      onClick: () => navigate("/teacher/profile"),
    },
    {
      key: "logout",
      label: "退出登录",
      icon: <LogoutOutlined />,
      danger: true,
      onClick: () => {
        setUser(null);
        localStorage.removeItem("user");
        navigate("/login");
      },
    },
  ];

  const handleMenuClick = (e: { key: string }) => {
    navigate(e.key);
  };

  const handleUserMenuClick: MenuProps["onClick"] = (e) => {
    if (e.key === "2") {
      // 退出登录逻辑
      setUser(null);
      localStorage.removeItem("user");
      navigate("/login");
    }
  };

  return (
    <StyledLayout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <Logo>{collapsed ? "教培" : "智慧教培通"}</Logo>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              paddingRight: 24,
            }}
          >
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: "16px",
                width: 64,
                height: 64,
              }}
            />
            <Dropdown
              menu={{ items: userMenuItems, onClick: handleUserMenuClick }}
              placement="bottomRight"
            >
              <div style={{ cursor: "pointer" }}>
                <Avatar icon={<UserOutlined />} />
                <span style={{ marginLeft: 8 }}>张老师</span>
              </div>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            minHeight: 280,
          }}
        >
          <Suspense
            fallback={
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  height: "100%",
                }}
              >
                <Spin size="large" tip="页面加载中..." />
              </div>
            }
          >
            <Outlet />
          </Suspense>
        </Content>
      </Layout>
    </StyledLayout>
  );
};

export default TeacherLayout;
